﻿@using QqhrCitizen.Models.ViewModel
@{
    vProduct product = ViewBag.Product as vProduct;
    ViewBag.Title = @product.Title + "_产品展示";
}

<script src="~/Scripts/video.js"></script>
<div class="d-row" style="border-top: 1px solid #3169ea;">
    <div class="d-row-c" style="margin-top:10px">
        <div class="d-col-2-12">
            <div class="contentarea">
                <div id="product-intro" class="m-item-grid clearfix">
                    <div id="preview">
                        <div id="spec-n1" class="jqzoom">
                            @if (product.ProductImages.Count > 0)
                            {
                                <img data-img="1" width="350" height="350" src="@product.ProductImages[0].Path" id="show_pic">
                            }
                            else
                            {
                                <img data-img="1" width="350" height="350" src="~/Images/productpre.jpg" id="show_pic">
                            }
                        </div>
                        <div id="spec-list">
                            <a class="spec-control disabled" id="spec-forward"></a>
                            <a class="spec-control" id="spec-backward"></a>
                            <div class="spec-items" style="position: absolute; width: 310px; height: 54px; overflow: hidden;">
                                <ul class="lh" style="position: absolute; width: 310px; height: 54px; top: 0px; left: 0px;padding:0px">
                                    @{ int i = 0;}
                                    <!--图片列表-->
                                    @if (product.ProductImages.Count > 0)
                                    {
                                        foreach (var item in product.ProductImages)
                                        {
                                            i++;
                                            if (i > 4)
                                            {
                                                break;
                                            }
                                            <li style="cursor:pointer"><img class="img" alt="" src="@item.Path" width="50" height="50"></li>
                                        }
                                    }
                                </ul>
                                <script>
                                    $(".img").mouseover(function (e) {
                                        $("#show_pic").attr("src", $(this).attr("src"));
                                    });
                                </script>
                            </div>
                        </div>
                        <div id="short-share" style="zoom: 1;padding: 24px 40px 0 34px;overflow: hidden;">
                            <div class="fl" style="color:#808080;font-size:14px"><span>商品编号：</span><span>@product.ID</span></div>
                        </div>
                    </div>

                    <div class="m-item-inner">
                        <div id="itemInfo">
                            <div id="name">
                                <h1>名称：@product.Title</h1>
                                <div id="p-ad" class="p-ad">
                                    简介：@product.Description
                                </div>
                            </div>
                            @if (product.Belong != ProductBelong.作品.ToString())
                            {
                                <div id="summary">
                                    <div id="summary-price" style="margin: 5px 0px;">
                                        <div class="dt">价 格：</div>
                                        <div class="dd">
                                            <strong class="p-price" id="jd-price">￥@product.Price</strong>
                                        </div>
                                    </div>
                                </div>
                            }
                        </div>
                    </div>
                </div>
                <div id="product-detail" class="m m1">
                    <div class="ui-switchable-panel ui-switchable-panel-selected" style="display: block;text-align:center">
                        <div class="mc" id="product-detail-1">
                            <div class="detail-content clearfix">
                                <div class="detail-content-wrap">
                                    <div class="detail-content-item">
                                        <div id="J-detail-content">
                                            <div style="width:1000px;margin:0 auto;padding:0;">
                                                <table style="width:1000px;margin:0 auto;padding:0;">
                                                    <tbody>
                                                        <tr>
                                                            <td>
                                                                @if (ViewBag.ProductVideo > 0)
                                                                {
                                                                    <script> player("@product.ProductVideo.Path", 800, 400, 1, "start.jpg");</script>
                                                                }
                                                            </td>
                                                        </tr>
                                                        @if (product.ProductImages.Count > 0)
                                                        {
                                                            foreach (var item in product.ProductImages)
                                                            {
                                                                <tr>
                                                                    <td><img src="@item.Path" class="" width="750" style="vertical-align: middle;"></td>
                                                                </tr>
                                                            }
                                                        }
                                                    </tbody>
                                                </table>
                                            </div><br>
                                        </div><!-- #J-detail-content -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>